<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <script src="../js/public.js"></script>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
      	var user = JSON.parse(localStorage.getItem('$users')).account;
      	// 接收值
//		mui.plusReady(function() {
//			var self = plus.webview.currentWebview();
//			var name = self.name;
//		});
        mui.ajax({
	            type: "get",
			    url: "../json.json",
			    async: true,
			    dataType: "json",
			    json: "jsoncallback",
			    timeout: 1000,
			    success: function(data) {
			    	   var order = data.order;
			    	   mui.each(order,function(i,item){
			    	   	  var html = '<tr><td>'+item.order_num+'</td><td>'+item.order_type+'</td><td>'+item.fault_time+'</td><td>'+item.tension_class+'</td><td>'+item.fault_sort+'</td><td>'+item.harm_level+'</td><td>'+item.order_staff+'</td></tr>'
		                    mui('#tablevalue')[0].insertAdjacentHTML('afterbegin', html);
			    	   });
			    	   
			    },
			    error: function(xhr, type, errorThrown) {
			        plus.nativeUI.toast(errorThrown);
			    }
			});
		mui.ajax({
            type: "POST",
		    url: __PATH__+"index/enquiries",
		    async: true,
		    data:{
		       user:user
		    },
		    dataType: "json",
		    json: "jsoncallback",
		    timeout: 1000,
		    success: function(data) {
			    console.log(data);
			    mui.each(data[0],function(i,item){
			    	var sel1 = '<option value="'+item.id+'">'+item.range+'</option>';
			    	mui('#harm_level')[0].insertAdjacentHTML('afterbegin', sel1);
			    });
		        mui.each(data[2],function(i,item){
			    	var sel2 = '<option value="'+item.id+'">'+item.typeName+'</option>';
			    	mui('#fault_sort')[0].insertAdjacentHTML('afterbegin', sel2);
			    });
			    mui.each(data[1],function(i,item){
			    	var sel3 = '<option value="'+item.id+'">'+item.level+'</option>';
			    	mui('#tension_class')[0].insertAdjacentHTML('afterbegin', sel3);
			    });
		    }
		});
    </script>
    <style>
    	/* 头部   */
    	.mui-bar-nav{background-color: #71BB98;}
    	.mui-bar-nav .mui-title{color:#FFF;font-size: 1.2rem;}
    	.mui-bar-nav .mui-action-back{color:#FFF;}
    	/* 内容区域 */
    	.mui-content{margin-bottom: 4rem;}
    	.mission,.maintain,.picture,.review{width: 98%; margin: 1rem 1%; background-color: #FFF; padding-top: 0.5rem;}
    	.mission h3,.maintain h3,.picture h3,.review h3{height: 2.2rem; line-height: 2.2rem; font-size: 1.2rem; margin: 0 1rem; border-bottom: 1px solid #ADADAD; font-weight: 500; color:#F47D00;}
    	.mission h3 span,.maintain h3 span,.picture h3 span{border-left: 4px solid #5D74F2; padding-left: 0.6rem; display: inline-block; height: 2rem;}
    	.maintain p,.review p{height: 2rem; line-height: 2rem; margin: 0 1rem; font-size: 1rem; padding-left: 1.5rem;}
		.tab{width: 98%; background-color: #FFF; margin: 0 1%;}
		.but{text-align: right;margin-top: 0.5rem;width: 97%;}
		.mission{padding-bottom: 1rem;}
		.mui-icon-arrowdown{position: absolute;top:0.5rem;right: 1.3rem;font-size:1rem;}
    	/*表格*/
    	.tab .th{width: 95%; margin:0 auto;}
    	.tab .th span{float:left;height:2rem;line-height:2rem;width: 14.2%;text-align: center; }
    	#tablevalue{border-left:1px solid #ADADAD;border-top:1px solid #ADADAD;width:95%;margin:0 auto;}
    	#tablevalue td{float:left; width:14.25%;border-right:1px solid #ADADAD;border-bottom:1px solid #ADADAD; text-align: center; font-size: .8rem; height: 1.5rem; line-height: 1.5rem;}
    	.abnormal{height: 2rem;margin-top: 1rem;position:relative;}
		.abnormal label{font-size:1rem; width: 35%;padding-right: 0.5rem; white-space: nowrap;overflow: hidden;text-overflow: clip; text-align: right;margin-top:0.4rem;}
		.abnormal input{font-size:1rem;width: 58%;background: transparent;height: 1.8rem;margin-bottom: 0;padding-left: 8px;padding-right: 0;}
		.abnormal select{font-size:1rem;width: 58%;background: transparent;height: 1.8rem;margin-bottom: 0;border:1px solid rgba(0,0,0,.2)!important;padding:0;padding-left: 8px;}
    	/* 底部   */
    	.mui-bar-tab{color:#FFF;}
    	.mui-bar-tab .mui-tab-item{background-color: #71BB98; color:#FFF;} 
    	.mui-bar-tab .mui-tab-item:first-child{border-right: 1px solid #FFF;}
    	.mui-bar-tab .mui-tab-item .mui-icon{display: inline-block; font-size: 2.5rem;}
    	.mui-bar-tab .mui-tab-item.mui-active{color: red;}
    	.none{display: none;}
    	#barcon{height: 3rem;line-height: 3rem;text-align: center;}
    	#barcon td{width:14%;height: 2rem;line-height: 2rem;text-align: center;}
    	.first{display: inline-block;margin-right: 0.5rem;}
    	.prev{border:1px solid #C7C7CC;font-size:0.8rem;width: 3.5rem; height:1.5rem;line-height: 1.5rem; display: inline-block;margin-right: 0.5rem;}
    	.next{border:1px solid #6D6D72;font-size:0.8rem;width: 3.5rem;height:1.5rem;line-height: 1.5rem;display: inline-block;margin-right: 0.5rem;}
    	.num{color:#2AC845}
    	.total{margin-right: 0.5rem;}
    	
    </style>
</head>
<body onLoad="goPage(1,10);">
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">我的作业</h1>
	</header>
	<div class="mui-content">
	    <div class="mui-content-padded">
			<div class="mission">
				<h3><span>历史记录查询</span></h3>
				<form class="mui-row" id="form">
	                <div class="mui-col-sm-4">
	                	<div class="abnormal">
							<label for="" class="mui-pull-left">故障时间</label>
							<input type="text" class="mui-pull-left" value="" placeholder="2017-01-12" id="fault_time" />
							<div class="mui-clearfix"></div>
						</div>
	                </div>
	                <div class="mui-col-sm-4">
	                	<div class="abnormal">
							<label for="" class="mui-pull-left">工单编号</label>
							<input type="text" class="mui-pull-left" placeholder="ASD123456" id="order_num" value="" />
							<div class="mui-clearfix"></div>
						</div>
	                </div>
	                <div class="mui-col-sm-4">
	                	<div class="abnormal">
							<label for="" class="mui-pull-left">危害程度</label>
							<select class="mui-pull-left" id="harm_level">
								<option value="">请选择</option>
		                    </select>
		                    <span class="mui-icon mui-icon-arrowdown"></span>
							<div class="mui-clearfix"></div>
						</div>
	                </div>
	                <div class="mui-col-sm-4">
	                	<div class="abnormal">
							<label for="" class="mui-pull-left">故障分类</label>
							<select class="mui-pull-left" id="fault_sort">
								<option value="">请选择</option>
		                    </select>
		                    <span class="mui-icon mui-icon-arrowdown"></span>
							<div class="mui-clearfix"></div>
						</div>
	                </div>
	                <div class="mui-col-sm-4">
	                	<div class="abnormal">
							<label for="" class="mui-pull-left">电压等级</label>
							<select class="mui-pull-left" id="tension_class">
								<option value="">请选择</option>
		                    </select>
		                    <span class="mui-icon mui-icon-arrowdown"></span>
							<div class="mui-clearfix"></div>
						</div>
	                </div>
	                <div class="mui-col-sm-12 but">
	                	<input type="reset"  class="mui-btn mui-btn-primary" style="background: #007AFF;color:#fff;border:0;margin-top: 0.1rem;" value="重置"/>
	                	<input type="button" id="submit" class="mui-btn mui-btn-primary"  value="提交"/>
	                </div>
	            </form>
			</div>
	    	<div class="tab" >
	    		<div class="th">
	    			<span>工单编号</span>
	    			<span>工单类型</span>
	    			<span>故障时间</span>
	    			<span>电压等级</span>
	    			<span>故障分类</span>
	    			<span>危害程度</span>
	    			<span>派单人员</span>
	    			<div class="mui-clearfix">
	    				
	    			</div>
	    		</div>
	    		<table width="100%" class="table" id="tablevalue"> 
		        </table>
		        <div id="barcon"><span class="none">没有更多数据了</span>111</div>
	    	</div>
	    </div>
	</div>
    <nav class="mui-bar mui-bar-tab">
	    <a class="mui-tab-item mui-active" style="border-right: 2px solid #fff;" id="home">
	        <span class="mui-icon mui-icon-home"></span>
	        <!--<span class="mui-tab-label">首页</span>-->
	    </a>
	    <a class="mui-tab-item" href="" id="myinfo">
	        <span class="mui-icon mui-icon-person"></span>
	        <!--<span class="mui-tab-label">电话</span>-->
	    </a>
	</nav>
	<script type="text/javascript">
		//
		document.getElementById('myinfo').addEventListener('tap',function(){
			mui.openWindow({
					url:"per_information.html",
					id:"per_information",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····",
						options:{
						}
					}
			})
		});
		//
		document.getElementById('home').addEventListener('tap',function(){
			mui.openWindow({
					url:"../main.html",
					id:"main",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····",
						options:{
						}
					}
			})
		});
	</script>
</body>
</html>
<script type="text/javascript">
var order_num = document.getElementById('order_num');
var tension_class = document.getElementById('tension_class');
var fault_sort = document.getElementById('fault_sort');
var harm_level = document.getElementById('harm_level');
var fault_time = document.getElementById('fault_time');
var submit = document.getElementById('submit');
submit.addEventListener('tap',function(){
	mui.ajax({
            type: "post",
		    url: __PATH__+"index/enquiries",
		    async: true,
		    data:{
		       user:user,
		       orderNo:order_num.value,
		       level:tension_class.value,
		       abnormal_typeid:fault_sort.value,
		       range:harm_level.value,
		       createtime:fault_time.value
		    },
		    dataType: "json",
		    json: "jsoncallback",
		    timeout: 1000,
		    success: function(data) {
//		    	   var order = data.order;
//		    	   mui.each(order,function(i,item){
//		    	   	  var html = '<tr><td>'+item.order_num+'</td><td>'+item.order_type+'</td><td>'+item.fault_time+'</td><td>'+item.tension_class+'</td><td>'+item.fault_sort+'</td><td>'+item.harm_level+'</td><td>'+item.order_staff+'</td></tr>'
//	                    mui('#tablevalue')[0].insertAdjacentHTML('afterbegin', html);
//		    	   });
		    	   console.log(data);
		    },
		    error: function(xhr, type, errorThrown) {
		        plus.nativeUI.toast(errorThrown);
		    }
		});
});
function goPage(pno,psize){
    var itable = document.getElementById("tablevalue");
    var num = itable.rows.length;//表格所有行数(所有记录数)
    var totalPage = 0;//总页数
    var pageSize = psize;//每页显示行数
    //总共分几页 
    if(num/pageSize > parseInt(num/pageSize)){   
            totalPage=parseInt(num/pageSize)+1;   
       }else{   
           totalPage=parseInt(num/pageSize);   
       }   
    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize+1;
     var endRow = currentPage * pageSize;
       endRow = (endRow > num)? num : endRow;   
       //遍历显示数据实现分页
    for(var i=1;i<(num+1);i++){    
        var irow = itable.rows[i-1];
        if(i>=startRow && i<=endRow){
            irow.style.display = "block";    
        }else{
            irow.style.display = "none";
        }
    }
    var tempStr =  "<span class='total'>共<span class='num'>"+totalPage+"</span>页</span> <span class='total' >第<span class='num'>"+currentPage+"</span>页</span>";
    if(currentPage>1){
        tempStr += "<a href=\"#\" class=\"first\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
        tempStr += "<a href=\"#\" class=\"prev\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">上一页</a>"
    }else{
        tempStr += "<span class=\"first\">首页</span>";
        tempStr += "<span class=\"prev\">上一页</span>";    
    }

    if(currentPage<totalPage){
        tempStr += "<a href=\"#\" class=\"next\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页</a>";
        tempStr += "<a href=\"#\" class=\"last\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
    }else{
        tempStr += "<span class=\"next\">下一页</span>>";
        tempStr += "<span class=\"last\">尾页</span>";    
    }

    document.getElementById("barcon").innerHTML = tempStr;
    
}
//
mui.plusReady(function() {
	//--
	mui.oldBack = mui.back;
	var backButtonPress = 0;
	mui.back = function(event) {
		backButtonPress++;
		if (backButtonPress > 1) {
			plus.runtime.quit();
		} else {
			plus.nativeUI.toast('再按一次退出应用');
		}
		setTimeout(function() {
			backButtonPress = 0;
		}, 1000);
		return false;
	};
});
</script> 
